<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
      非父子组件传值:
        使用 中央事件总线( const bus = new Vue() ): 
          需要接收数据的一方通过bus.$on('自定义的事件名',(val)=>{}) , 需要传输数据的一方通过 bus.$emit('自定义的时事件名',参数)
          这种方式只适合写demo,不适合我们做大型项目,因为要随时监听,代码量太多
    -->
    <div id="app">
        <my-bro1></my-bro1>
        <my-bro2></my-bro2>
    </div>
</body>
<template id="bro1">
    <div>组件1
        <button @click="sendData">给组件2发送数据</button>
    </div>
</template>
<template id="bro2">
    <div>组件2</div>
</template>
<script>
    // 1.定义中央事件总线
    const bus =  new Vue()
    const Bro1 ={
        template:'#bro1',
        methods:{
            sendData(){
                // 3. 传输的一方通过bus.$emit('自定义事件名',参数)来传输
                bus.$emit('my-event',5000)
            }
        }   
    }
    const Bro2 ={
        template:'#bro2',
        mounted(){
            // 2. 接收的一方通过bus.$on('自定义事件名',回调函数)先监听
            bus.$on('my-event',(val)=>{
                console.log(val) // 此时:Bro2组件就接收到了Bro1组件传的5000
            })
        }
    }
    new Vue({
        el:'#app',
        components:{
            'my-bro1':Bro1,
            'my-bro2':Bro2,
        }
    })
</script>
</html>